<template>
	<view>
		<u-tabs :list="list1" itemStyle="padding-left: 32rpx; padding-right: 32rpx; height: 80rpx;background: #fff;"
			:activeStyle="{color: '#000000',fontWeight: 'bold'}" :lineColor="'#FC6758'" @click="click">
		</u-tabs>
		<view class="big_content">
			<view class="top">
				<view class="top_item">
					<view class="top_num">
						{{info.estimatedRevenueTotal}}
					</view>
					<view class="top_title">
						总预估收入（元）
					</view>
				</view>
				<view class="top_item">
					<view class="top_num">
						{{info.settleAccountsTotal}}
					</view>
					<view class="top_title">
						总结算收入（元）
					</view>
				</view>
			</view>

			<view v-for="(item,index) in list" class="content_item">
				<view class="tops">
					<view class="top_left">
						<image v-if="item.type==1" src="../../static/tabsIcon/yj/jd.png" mode=""></image>
						<image v-if="item.type==0" src="../../static/tabsIcon/yj/tb.png" mode=""></image>
						<image v-if="item.type==2" src="../../static/tabsIcon/yj/wph.png" mode=""></image>
						<image v-if="item.type==3" src="../../static/home/Meituan2.png" mode=""></image>
						<image v-if="item.type==4" src="../../static/home/PDD.png" mode=""></image>
						<image v-if="item.type==6" src="../../static/home/mall.png" mode=""></image>
						<view class="name">
							{{ item.type | type}}
						</view>
					</view>
					<view class="top_right">
						预估有效订单数
						<text>{{item.orderSum}}</text>
					</view>
				</view>
				<view class="bottom">
					<view @click="urlRouter(item.type , 1)" class="bottom_item">
						<view class="bt_num">
							{{item.settleAccounts}}
						</view>
						<view class="bt_name">
							结算收入
						</view>
					</view>
					<view @click="urlRouter(item.type , 0)" class="bottom_item">
						<view class="bt_num">
							{{item.estimatedRevenue}}
						</view>
						<view class="bt_name">
							预估收入
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		commissionsrecord
	} from '@/api/mine'
	export default {
		data() {
			return {
				act: 0,
				ss: 1,
				info: [],
				list: [],
				list1: [{
						name: '今日',
						value: 0
					},
					{
						name: '本周',
						value: 1
					},
					{
						name: '本月',
						value: 2
					},
					{
						name: '上月',
						value: 3
					}
				]
			}
		},
		filters: {
			type(text) {
				let str = ""
				if (text == 0) {
					str = "淘宝"
				}
				if (text == 1) {
					str = "京东"
				}
				if (text == 2) {
					str = "唯品会"
				}
				if (text == 3) {
					str = "美团"
				}
				if (text == 4) {
					str = "拼多多"
				}
				if (text == 6) {
					str = "牛粉商城"
				}
				return str
			}
		},
		onLoad() {
			this.commissionsrecord();
		},
		methods: {
			urlRouter(type, type1) {
				uni.navigateTo({
					url: '/pages/mine/OrderListTow?act=' + type + '&type=' + this.act + '&type1=' + type1
				})
			},
			commissionsrecord() {
				commissionsrecord(this.act).then(res => {
					if (res.success == 1) {
						this.info = res.data;
						this.list = res.data.commissionsRecordInfoList;
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},
			click(item) {
				this.act = item.value
				this.commissionsrecord();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.big_content {
		padding: 20rpx;
	}

	.top {
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 200rpx;
		background: #FFFFFF;

		.top_item {
			text-align: center;

			.top_num {
				color: #FC6758;
				margin-bottom: 15rpx;
			}

			.top_title {
				color: #666666;
				font-size: 30rpx;
			}
		}
	}

	.content_item {
		margin: 20rpx 0;
		padding: 20rpx;
		background: #FFFFFF;

		.tops {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.top_left {
				display: flex;
				align-items: center;

				image {
					width: 56rpx;
					height: 56rpx;
					margin-right: 10rpx;
				}

				.name {
					color: #666666;
					font-size: 40rpx;
					font-weight: bold;
				}
			}

			.top_right {
				color: #666666;
				font-size: 30rpx;

				text {
					margin-left: 10rpx;
				}
			}
		}

		.bottom {
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.bottom_item {
				color: #666666;

				.bt_num {
					font-size: 40rpx;
					font-weight: 600;
					text-align: center;
				}

				.bt_name {
					margin-top: 6rpx;
					font-size: 30rpx;
				}
			}
		}
	}
</style>
<style>
	page {
		background: #f0f0f0;
	}
</style>
